<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的生活</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">

</head>
<body>
<div class="page-group">
    <div id="page-infinite-scroll-bottom" class="page page-current">

        <div class="modal modal-no-buttons">
            ...
            <div class="popup">
                <header class="bar bar-nav">
                    <h1 class="title">Popup(HTML)</h1>
                </header>
                ...
                <div class="content">
                    <div class="content-block">
                        <p><a href="#" class="open-about">Open About Popup </a></p>
                        <p><a href="#" class="open-services">Open Services Popup </a></p>
                    </div>

                </div>
                <!-- About Popup -->
                <div class="popup popup-about">
                    <div class="content-block">
                        <p>About</p>
                        <p><a href="#" class="close-popup">Close popup</a></p>
                        <p>Lorem ipsum dolor ...</p>
                    </div>
                </div>
                <!-- Services Popup -->
                <div class="popup popup-services">
                    <div class="content-block">
                        <p>Services</p>
                        <p><a href="#" class="close-popup">Close popup</a></p>
                        <p>Lorem ipsum dolor ...</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script>

    $(function () {
        'use strict';

        //下拉刷新页面
        $(document).on("pageInit", "#page-ptr", function(e, id, page) {
            var $content = $(page).find(".content").on('refresh', function(e) {
                // 模拟2s的加载过程
                setTimeout(function() {
                    var cardHTML = '<div class="card">' +
                        '<div class="card-header">标题</div>' +
                        '<div class="card-content">' +
                        '<div class="card-content-inner">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容' +
                        '</div>' +
                        '</div>' +
                        '</div>';

                    $content.find('.card-container').prepend(cardHTML);
                    // $(window).scrollTop(0);
                    // 加载完毕需要重置
                    $.pullToRefreshDone($content);
                }, 2000);
            });
        });

        //无限滚动
        $(document).on("pageInit", "#page-infinite-scroll-bottom", function(e, id, page) {
            var loading = false;
            // 每次加载添加多少条目
            var itemsPerLoad = 20;
            // 最多可加载的条目
            var maxItems = 100;
            var lastIndex = $('.list-container li').length;
            function addItems(number, lastIndex) {
                // 生成新条目的HTML
                var html = '';
                for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
                    html += '<li class="item-content"><div class="item-inner"><div class="item-title">新条目</div></div></li>';
                }
                // 添加新条目
                $('.infinite-scroll .list-container').append(html);
            }
            $(page).on('infinite', function() {
                // 如果正在加载，则退出
                if (loading) return;
                // 设置flag
                loading = true;
                // 模拟1s的加载过程
                setTimeout(function() {
                    // 重置加载flag
                    loading = false;
                    if (lastIndex >= maxItems) {
                        // 加载完毕，则注销无限加载事件，以防不必要的加载
                        $.detachInfiniteScroll($('.infinite-scroll'));
                        // 删除加载提示符
                        $('.infinite-scroll-preloader').remove();
                        return;
                    }
                    addItems(itemsPerLoad,lastIndex);
                    // 更新最后加载的序号
                    lastIndex = $('.list-container li').length;
                    $.refreshScroller();
                }, 1000);
            });
        });

        //顶部无限滚动
        $(document).on("pageInit", "#page-infinite-scroll-top", function(e, id, page) {
            function addItems(number, lastIndex) {
                // 生成新条目的HTML
                var html = '';
                for (var i = lastIndex+ number; i > lastIndex ; i--) {
                    html += '<li class="item-content"><div class="item-inner"><div class="item-title">条目'+i+'</div></div></li>';
                }
                // 添加新条目
                $('.infinite-scroll .list-container').prepend(html);

            }
            var timer = false;
            $(page).on('infinite', function() {
                var lastIndex = $('.list-block li').length;
                var lastLi = $(".list-container li")[0];
                var scroller = $('.infinite-scroll-top');
                var scrollHeight = scroller[0].scrollHeight; // 获取当前滚动元素的高度
                // 如果正在加载，则退出
                if (timer) {
                    clearTimeout(timer);
                }

                // 模拟1s的加载过程
                timer = setTimeout(function() {

                    addItems(20,lastIndex);

                    $.refreshScroller();
                    //  lastLi.scrollIntoView({
                    //     behavior: "smooth",
                    //     block:    "start"
                    // });
                    // 将滚动条的位置设置为最新滚动元素高度和之前的高度差
                    scroller.scrollTop(scroller[0].scrollHeight - scrollHeight);
                }, 1000);
            });

        });
        //test demo js

        //多个标签页下的无限滚动
        $(document).on("pageInit", "#page-fixed-tab-infinite-scroll", function(e, id, page) {
            var loading = false;
            // 每次加载添加多少条目
            var itemsPerLoad = 20;
            // 最多可加载的条目
            var maxItems = 100;
            var lastIndex = $('.list-container li')[0].length;
            function addItems(number, lastIndex) {
                // 生成新条目的HTML
                var html = '';
                for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
                    html += '<li class="item-content""><div class="item-inner"><div class="item-title">新条目</div></div></li>';
                }
                // 添加新条目
                $('.infinite-scroll.active .list-container').append(html);
            }
            $(page).on('infinite', function() {
                // 如果正在加载，则退出
                if (loading) return;
                // 设置flag
                loading = true;
                var tabIndex = 0;
                if($(this).find('.infinite-scroll.active').attr('id') == "tab2"){
                    tabIndex = 0;
                }
                if($(this).find('.infinite-scroll.active').attr('id') == "tab3"){
                    tabIndex = 1;
                }
                lastIndex = $('.list-container').eq(tabIndex).find('li').length;
                // 模拟1s的加载过程
                setTimeout(function() {
                    // 重置加载flag
                    loading = false;
                    if (lastIndex >= maxItems) {
                        // 加载完毕，则注销无限加载事件，以防不必要的加载
                        //$.detachInfiniteScroll($('.infinite-scroll').eq(tabIndex));
                        // 删除加载提示符
                        $('.infinite-scroll-preloader').eq(tabIndex).hide();
                        return;
                    }
                    addItems(itemsPerLoad,lastIndex);
                    // 更新最后加载的序号
                    lastIndex =  $('.list-container').eq(tabIndex).find('li').length;
                    $.refreshScroller();
                }, 1000);
            });
        });

        //图片浏览器
        $(document).on("pageInit", "#page-photo-browser", function(e, id, page) {
            var myPhotoBrowserStandalone = $.photoBrowser({
                photos : [
                    '//img.alicdn.com/tps/i3/TB1kt4wHVXXXXb_XVXX0HY8HXXX-1024-1024.jpeg',
                    '//img.alicdn.com/tps/i1/TB1SKhUHVXXXXb7XXXX0HY8HXXX-1024-1024.jpeg',
                    '//img.alicdn.com/tps/i4/TB1AdxNHVXXXXasXpXX0HY8HXXX-1024-1024.jpeg',
                ]
            });
            //点击时打开图片浏览器
            $(page).on('click','.pb-standalone',function () {
                myPhotoBrowserStandalone.open();
            });
            /*=== Popup ===*/
            var myPhotoBrowserPopup = $.photoBrowser({
                photos : [
                    '//img.alicdn.com/tps/i3/TB1kt4wHVXXXXb_XVXX0HY8HXXX-1024-1024.jpeg',
                    '//img.alicdn.com/tps/i1/TB1SKhUHVXXXXb7XXXX0HY8HXXX-1024-1024.jpeg',
                    '//img.alicdn.com/tps/i4/TB1AdxNHVXXXXasXpXX0HY8HXXX-1024-1024.jpeg',
                ],
                type: 'popup'
            });
            $(page).on('click','.pb-popup',function () {
                myPhotoBrowserPopup.open();
            });
            /*=== 有标题 ===*/
            var myPhotoBrowserCaptions = $.photoBrowser({
                photos : [
                    {
                        url: '//img.alicdn.com/tps/i3/TB1kt4wHVXXXXb_XVXX0HY8HXXX-1024-1024.jpeg',
                        caption: 'Caption 1 Text'
                    },
                    {
                        url: '//img.alicdn.com/tps/i1/TB1SKhUHVXXXXb7XXXX0HY8HXXX-1024-1024.jpeg',
                        caption: 'Second Caption Text'
                    },
                    // 这个没有标题
                    {
                        url: '//img.alicdn.com/tps/i4/TB1AdxNHVXXXXasXpXX0HY8HXXX-1024-1024.jpeg',
                    },
                ],
                theme: 'dark',
                type: 'standalone'
            });
            $(page).on('click','.pb-standalone-captions',function () {
                myPhotoBrowserCaptions.open();
            });
        });


        //对话框
        $(document).on("pageInit", "#page-modal", function(e, id, page) {
            var $content = $(page).find('.content');
            $content.on('click','.alert-text',function () {
                $.alert('这是一段提示消息');
            });

            $content.on('click','.alert-text-title', function () {
                $.alert('这是一段提示消息', '这是自定义的标题!');
            });

            $content.on('click', '.alert-text-title-callback',function () {
                $.alert('这是自定义的文案', '这是自定义的标题!', function () {
                    $.alert('你点击了确定按钮!')
                });
            });
            $content.on('click','.confirm-ok', function () {
                $.confirm('你确定吗?', function () {
                    $.alert('你点击了确定按钮!');
                });
            });
            $content.on('click','.prompt-ok', function () {
                $.prompt('你叫什么问题?', function (value) {
                    $.alert('你输入的名字是"' + value + '"');
                });
            });
        });

        //操作表
        $(document).on("pageInit", "#page-action", function(e, id, page) {
            $(page).on('click','.create-actions', function () {
                var buttons1 = [
                    {
                        text: '请选择',
                        label: true
                    },
                    {
                        text: '卖出',
                        bold: true,
                        color: 'danger',
                        onClick: function() {
                            $.alert("你选择了“卖出“");
                        }
                    },
                    {
                        text: '买入',
                        onClick: function() {
                            $.alert("你选择了“买入“");
                        }
                    }
                ];
                var buttons2 = [
                    {
                        text: '取消',
                        bg: 'danger'
                    }
                ];
                var groups = [buttons1, buttons2];
                $.actions(groups);
            });
        });

        //加载提示符
        $(document).on("pageInit", "#page-preloader", function(e, id, page) {
            $(page).on('click','.open-preloader-title', function () {
                $.showPreloader('加载中...')
                setTimeout(function () {
                    $.hidePreloader();
                }, 2000);
            });
            $(page).on('click','.open-indicator', function () {
                $.showIndicator();
                setTimeout(function () {
                    $.hideIndicator();
                }, 2000);
            });
        });


        //选择颜色主题
        $(document).on("click", ".select-color", function(e) {
            var b = $(e.target);
            document.body.className = "theme-" + (b.data("color") || "");
            b.parent().find(".active").removeClass("active");
            b.addClass("active");
        });




        $.init();
    });

</script>
</body>
</html>
